<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" href="img/favicon.ico">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.80.0">
    <title> Register package data </title>
</head>

<style type="text/css">
    body {
        font-family: 'Phetsarath OT';
        background: rgb(99, 189, 228);
        background: radial-gradient(circle, rgba(99, 189, 228, 1) 0%, rgba(17, 14, 62, 1) 100%);
    }

    .loginBtn {
        box-sizing: border-box;
        position: relative;
        margin: 0.2em;
        /*padding: 0 15px 0 15px;*/
        border: none;
        text-align: left;
        line-height: 38px;
        width: 220px;
        white-space: nowrap;
        border-radius: 0.3em;
        font-size: 15px;
        color: #FFF;
        cursor: pointer;
        font-weight: bolder;
        text-align: center;
    }
    /*.loginBtn:before {*/
    /*    content: "";*/
    /*    box-sizing: border-box;*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    width: 38px;*/
    /*    height: 100%;*/
    /*}*/
    .loginBtn:focus {
        outline: none;
    }
    .loginBtn:active {
        box-shadow: inset 0 0 0 32px rgba(0, 0, 0, 0.1);
    }
    .loginBtn--otp {
        background-color: #4C69BA;
        background-image: linear-gradient(#00acf7, #00a2e8);
        text-shadow: 0 -1px 0 #354C8C;
    }
    .loginBtn--otp:before {
        border-right: #8a8a8a 1px solid;
    }
    .loginBtn--otp:hover, .loginBtn--otp:focus {
        background-color: #5B7BD5;
        background-image: linear-gradient(#00a2e8, #00a2e8);
    }
    .center{
        text-align: center;display: flex;flex-direction: column;width: 50%;margin: auto;background-color: white;padding: 50px 0;border-radius: 10px;
    }
</style>
<body>
<div class="container-fluid" id="grad1" style="margin-top: 50px;">
    <div class="row justify-content-center mt-0">
        <div class="col-11 col-sm-9 col-md-7 col-lg-6 text-center p-0 mt-3 mb-2">
            <div class="card px-0 pt-4 pb-0 mt-3 mb-3">
                <div class="card  mb-3"></div>
                <div class="center">
                    <div class="row justify-content-center">
                        <div class="col-5"><img src="img/logo.png" class="fit-image"></div>
                    </div>
                    <div>
                        <h3>
                            <strong id="name">套餐 ET4 </strong>
                        </h3>
                        <h5>
                            <strong id="detail">10GB/30日, 50,000 基普</strong>
                        </h5>
                    </div>
                    <div>
                        <button class="loginBtn loginBtn--otp">Register with number</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/token.js"></script>
<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
<script type="text/javascript">

    var layer = layui.layer;
    var form = layui.form;

    var moduleName = "shop";
    var defaultLang = layui.data('langTab').langType;
    initLangConfig({
        defaultLang:defaultLang,
        filePath: "js/i18n/"+moduleName+"/",
        module:moduleName,
        base:"js/"
    })
    var i18np = null;
    function changeLang(lang) {
        defaultLang = lang;
        reloadI18n({
            defaultLang:lang,
            filePath: "js/i18n/"+moduleName+"/",
            module:moduleName,
        })
        i18np.loadProperties(moduleName);
    }

    layui.config({base: 'js/'})
        // 继承treetable.js插件
        .extend({i18np: 'i18n'}).use([ 'i18np','jquery'], function () {
        i18np = layui.i18np;
        i18np.loadProperties(moduleName);
    });

    $(".loginBtn").click(function () {
        location.href = "popular-package-yz.html?id="+GetQueryString("id");
    })

    $(function () {
        $.ajax({
            url: HOST + "webapi/combo/getComboById?id="+GetQueryString("id"),
            type: "GET",
            success: function (res) {
                if (res.code == 200){
                    $("#name").html("套餐 "+res.data.comboName);
                    if (res.data.value > 1024){
                        $("#detail").html((res.data.value/1024).toFixed(1)+"GB/"+res.data.day+"日，"+res.data.price+"基普");
                    }else{
                        $("#detail").html(res.data.value+"MB/"+res.data.day+"日，"+res.data.price+"基普")
                    }
                }
            }
        })
    })
</script>